<template>
  <view class="mp-child">
    <!-- 在这里引入你的组件 -->
{{item}}
    <!-- 首页封面 -->
    <view class="wh_750 cover"
          :style="{
              backgroundSize:'750rpx 100%'
            }"
          v-if="item.desc == 0"
    >
      <view class="wh_383 bg_FFFFFF flex align-center justify-center"
            style="height: 891rpx;position: absolute;top: 50%;right: 111rpx;transform: translateY(-50%)"
      >
        <view class="wh_343 flex flex-column align-center justify-around"
              style="height: 851rpx;border: 4rpx solid #9F9F9F;"
        >
          <view class="wh_343 flex align-center justify-center">
            <view class="wh_60 mr_6 flex flex-column align-center justify-between"
                  style="height: 664rpx;border: 2rpx solid #9F9F9F;"
            >
              <view class="fs_27 color_42403C fw_500 wh_27 mt_20"
                    style="text-align: center"
              >
                {{ item.hall_num }}
              </view>
              <view class="fs_27 color_42403C fw_500 wh_27 mb_20"
                    style="text-align: center"
              >
                主编人·{{ item.editor }}
              </view>
            </view>
            <view class="wh_196 flex flex-column align-center justify-center"
                  style="height: 664rpx;border: 2rpx solid #9F9F9F;"
            >
              <view class="color_42403C fw_500 wh_103"
                    style="text-align: center;font-size: 103rpx;"
              >
                {{ item.title }}
              </view>
            </view>
            <view class="wh_60 ml_6 flex flex-column align-center justify-end"
                  style="height: 664rpx;border: 2rpx solid #9F9F9F;"
            >
              <view class="fs_27 color_42403C fw_500 wh_27 mb_20"
                    style="text-align: center"
              >
                创建日期·{{ number2Chinese(item.createtime) }}
              </view>
            </view>
          </view>
          <view class="wh_334 hW_168"
                style="border: 2rpx solid #9F9F9F;overflow: hidden;"
          >
            <image class="wh_334 hW_168" :src="`${IMG_URL}/index/canonization_cover_background.png`"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="wh_750 flex flex-column align-center justify-center"
          style="height: 95%;position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%);"
          v-else
    >
      <page-header-style :info="item"
                         :genealogicalInformation="list[0]"
                         :current="pageCurrent"
                         :genealogy_id="genealogy_id"
                         style="height: 100%;" class="flex-sub"
      >
        <template #content="{item,content}">
          <view class="flex flex-column align-center"
                style="width: 100%;height: 100%;"
          >
            <view class="canonizationHeader flex align-center justify-center mt_15"
                  v-if="item.sys_id != 2 && item.sys_id != 3"
            >
              {{ item.cate_title }}
            </view>
            <!-- 目录 -->
            <view class="flex flex-column align-center justify-evenly"
                  style="width: 100%; height: 100%;"
                  v-if="item.desc == 1 && item.sys_id == 0"
            >
              <view style="width: 100%;" class="flex align-center justify-between"
                    v-for="(item1,index) in content.content" :key="index">
                <view class="ml_20 fs_30 fw_500 color_4B4B4B">{{ item1.title }}</view>
                <view class="flex-sub ml_20 mr_20" style="border-bottom: 2rpx dashed  #4B4B4B;"></view>
                <view class="mr_20 fs_30 fw_500 color_4B4B4B" @click.stop="skip(item1.page)">{{ item1.page }}</view>
              </view>
            </view>
            <!-- 索引 -->
            <view class="mt_20 flex flex-sub"
                  style="width: 100%;"
                  v-else-if="item.desc == 'cate' && item.sys_id == 1"
            >
              <view style="border-right: 2rpx solid #BF8257;"
                    class="flex-sub flex flex-column justify-start"
              >
                <template v-for="(item2,index) in content.content" :key="index">
                  <view v-if="item2.desc == 'title' && index < 21"
                        class="hW_40 flex align-center justify-center bg_FF4206 ml_10 mr_10 mt_10 fs_28 color_FFFFFF fw_500"
                  >
                    {{ item2.title }}
                  </view>
                  <view v-if="item2.desc == 'shi' && index < 21"
                        class="flex align-center justify-between ml_10 mr_10 mt_10"
                  >
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.title }}</view>
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                  </view>
                  <view v-if="item2.desc == 'people' && index < 21"
                        class="flex align-center justify-between ml_10 mr_10 mt_10"
                  >
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.name }}</view>
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                  </view>
                </template>
              </view>
              <view style="height: 100%;border-right: 2rpx solid #BF8257;"
                    class="flex flex-column justify-start flex-sub"
              >
                <template v-for="(item2,index) in content.content" :key="index">
                  <view v-if="item2.desc == 'title' && index >= 21 && index < 42"
                        class="hW_40 flex align-center justify-center bg_FF4206 ml_10 mr_10 fs_28 color_FFFFFF fw_500 mt_10"
                  >
                    {{ item2.title }}
                  </view>
                  <view v-if="item2.desc == 'shi' && index >= 21 && index < 42"
                        class="flex align-center justify-between ml_10 mr_10 mt_10"
                  >
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.title }}</view>
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                  </view>
                  <view v-if="item2.desc == 'people' && index >= 21 && index < 42"
                        class="flex align-center justify-between ml_10 mr_10 mt_10"
                  >
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.name }}</view>
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                  </view>
                </template>
              </view>
              <view style="height: 100%;"
                    class="flex flex-column justify-start flex-sub"
              >
                <template v-for="(item2,index) in content.content" :key="index">
                  <view v-if="item2.desc == 'title' && index >= 42 && index < 63"
                        class="hW_40 flex align-center justify-center bg_FF4206 ml_10 mr_10 fs_28 color_FFFFFF fw_500 mt_10"
                  >
                    {{ item2.title }}
                  </view>
                  <view v-if="item2.desc == 'shi' && index >= 42 && index < 63"
                        class="flex align-center justify-between ml_10 mr_10 mt_10"
                  >
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.title }}</view>
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                  </view>
                  <view v-if="item2.desc == 'people' && index >= 42 && index < 63"
                        class="flex align-center justify-between ml_10 mr_10 mt_10"
                  >
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.name }}</view>
                    <view class="fs_26 fw_500 color_4B4B4B">{{ item2.page }}</view>
                  </view>
                </template>
              </view>
            </view>
            <!-- 照片墙封面 -->
            <view class="flex-sub flex align-center justify-center"
                  style="width: 100%"
                  v-else-if="item.desc == 'cate' && item.sys_id == 2"
            >
              <view class="wh_151 flex flex-column align-center">
                <view class="wh_151 hW_19"
                      style="background: #BF8257;border-radius: 10rpx"
                ></view>
                <view class="wh_151 hW_315 flex align-center justify-center mt_4" style="border: 3rpx solid #BF8257">
                  <view class="fs_65 fw_500 color_4B4B4B wh_65"
                        style="text-align: center;line-height: 95rpx"
                  >
                    照片墙
                  </view>
                </view>
              </view>
            </view>
            <!-- 照片墙内容 -->
            <view class="flex-sub flex align-center justify-center"
                  style="width: 100%;"
                  v-else-if="item.desc == 'content' && item.sys_id == 2 && content.type == 1"
            >
              <view class="flex-column align-center"
                    style="width: 95%;height: 95%;display: grid;grid-template-columns: repeat(3, 182rpx);grid-template-rows: repeat(4, 221rpx);grid-gap: 15rpx"
              >
                <template v-for="(item,index) in content.content" :key="index">
                  <view class="wh_182 hW_221 flex align-center justify-center flex-column"
                        style="background: rgba(255,255,255,0.34);"
                  >
                    <image :src="item.image"
                           class="wh_182 hW_221"
                           mode="aspectFill"
                    ></image>
                  </view>
                </template>
                <template v-if="content.content.length < 12">
                  <view class="wh_182 hW_221 flex align-center justify-center flex-column"
                        style="background: rgba(255,255,255,0.34);"
                  >
                    <image class="wh_77 hW_77" :src="`${IMG_URL}/index/cation_upload.png`"></image>
                    <view class="mt_10 fs_22 fw_500 color_FF7905">上传照片</view>
                  </view>
                </template>
              </view>
            </view>
            <!-- 单张照片墙 -->
            <view class="flex-sub flex align-center justify-center"
                  style="width: 100%;"
                  v-else-if="item.desc == 'content' && item.sys_id == 2 && content.type == 2"
            >
              <view class="flex flex-column align-center justify-center"
                    style="width: 95%;height: 95%;"
              >
                <template v-if="!!content.content && content.content.length > 0">
                  <image :src="content.content[0].image"
                         style="width: 100%;height: 100%"
                         mode="aspectFill"
                  ></image>
                </template>
                <template v-else>
                  <view class="wh_182 hW_244 flex align-center justify-center flex-column"
                        style="background: rgba(255,255,255,0.34);"
                  >
                    <image class="wh_77 hW_77" :src="`${IMG_URL}/index/cation_upload.png`"></image>
                    <view class="mt_8 fs_22 fw_500 color_4B4B4B">宗亲合照</view>
                    <view
                      class="mt_28 wh_113 hW_46 flex align-center justify-center bg_FF7950 fs_22 fw_500 color_FFFFFF"
                      style="border-radius: 23rpx"
                    >
                      上传
                    </view>
                  </view>
                </template>
              </view>
            </view>
            <!-- 世系表封面 -->
            <view class="flex-sub flex align-center justify-center"
                  style="width: 100%"
                  v-else-if="item.desc == 'cate' && item.sys_id == 3"
            >
              <view class="wh_151 flex flex-column align-center">
                <view class="wh_151 hW_19"
                      style="background: #BF8257;border-radius: 10rpx"
                ></view>
                <view class="wh_151 hW_315 flex align-center justify-center mt_4" style="border: 3rpx solid #BF8257">
                  <view class="fs_65 fw_500 color_4B4B4B wh_65"
                        style="text-align: center;line-height: 95rpx"
                  >
                    世系表
                  </view>
                </view>
              </view>
            </view>
            <!-- 世系表内容 -->
            <view class="flex flex-column align-center justify-between mt_12"
                  style="width: 100%"
                  v-else-if="item.desc == 'content' && item.sys_id == 3"
            >
              <view class="wh_595 hW_490 mt_12 genealogy_label"
                    style="border: 3rpx solid #BF8257;"
                    v-for="(item,index) in content.content"
                    :key="index"
              >
                <view class="title flex flex-column align-center justify-center fs_30 color_4B4B4B fw_500"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  <text>{{ item.shi_cn }}</text>
                  <text class="mt_6">(辈)</text>
                </view>
                <view class="name flex flex-column align-center justify-center fs_30 fw_500 color_696969"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  姓名
                </view>
                <view class="mate flex flex-column align-center justify-center fs_30 fw_500 color_696969"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  配偶
                </view>
                <view class="parent flex flex-column align-center justify-center fs_30 fw_500 color_696969"
                      style="border-bottom: 2rpx solid #BF8257;"
                >
                  父母
                </view>
                <view class="name1 flex flex-column align-center justify-center fs_30 color_4B4B4B fw_500"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  {{ item.name }}
                </view>
                <view class="name2 flex flex-column align-center justify-center fs_30 color_4B4B4B fw_500"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  {{ item.qz_name }}
                </view>
                <view class="parent1 flex flex-column align-center justify-center fs_22 color_4B4B4B fw_500"
                      style="border-bottom: 2rpx solid #BF8257;"
                >
                  <template v-for="(item1,index1) in item.parents" :key="index1">
                    <view>
                      {{ item1.surname }}{{ item1.name }}
                    </view>
                  </template>
                </view>
                <view class="upload1 flex flex-column align-center justify-center"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  <image :src="`${IMG_URL}/index/cate_no_image.png`" class="wh_85 hW_85"></image>
                  <view class="fs_18 color_696969 fw_500 mt_5">点击</view>
                  <view class="fs_18 color_696969 fw_500">添加照片</view>
                </view>
                <view class="upload2 flex flex-column align-center justify-center"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  <image :src="`${IMG_URL}/index/cate_no_image.png`" class="wh_85 hW_85"></image>
                  <view class="fs_18 color_696969 fw_500 mt_5">点击</view>
                  <view class="fs_18 color_696969 fw_500">添加照片</view>
                </view>
                <view class="sonsAndDaughters flex flex-column align-center justify-center fs_30 fw_500 color_696969"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  子女
                </view>
                <view class="brotherAndSister flex flex-column align-center justify-center fs_20 color_4B4B4B fw_500"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  {{ item.brother_desc }}
                </view>
                <view class="familyName flex flex-column align-center justify-center fs_22 color_4B4B4B fw_500">
                  <template v-for="(item2,index2) in item.children" :key="index2">
                    <view>
                      {{ item2.surname }}{{ item2.name }}
                    </view>
                  </template>
                </view>
                <view class="ranking flex flex-column align-center justify-center fs_20 color_4B4B4B fw_500"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  {{ item.level_desc }}
                </view>
                <view class="birthday1 flex flex-column align-center justify-center fs_20 color_4B4B4B fw_500"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  <text>{{ item.birthday }}</text>
                  <text>{{ item.lunar_birthday }}</text>
                </view>
                <view class="birthday2 flex flex-column align-center justify-center fs_20 color_4B4B4B fw_500"
                      style="border-right: 2rpx solid #BF8257;border-bottom: 2rpx solid #BF8257;"
                >
                  <text>{{ item.qz_birthday }}</text>
                  <text>{{ item.qz_lunar_birthday }}</text>
                </view>
                <view class="personalProfile fs_20 color_4B4B4B fw_500"
                      style="border-right: 2rpx solid #BF8257;"
                >
                  {{ item.remark }}
                </view>
              </view>
            </view>
            <view class="flex-sub flex flex-column align-center justify-between mt_12"
                  style="width: 100%"
                  v-else
            >
              <view class="mt_12" style="width: 95%;height: 95%;">
                <mp-html :content="content.content"></mp-html>
              </view>
            </view>
          </view>
        </template>
      </page-header-style>
    </view>
  </view>
</template>

<script>
  import PageHeaderStyle from '@/pages/genealogy/components/pageHeaderStyle.vue';
  import MpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue';

  export default {
    components: {
      MpHtml, PageHeaderStyle,
    },
    props: {
      item: {
        type: [Object, String, Number, Array, Boolean],
        default() {
          return new Object;
        },
      },
      index: {
        type: Number,
        default: 0,
      },
      componentName: {
        type: String,
        default: '',
      },
    },
  };
</script>

<style scoped>
  .mp-child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>